<template>
    <div class="headLnquire-warp">
        <el-form :model="ruleForm" ref="ruleForm" label-width="50px">
            <el-form-item prop="date" :label="$t('m.label.date')" >
                <datePicker
                    :form="ruleForm"
                    formId="date"
                    startTime="startTime"
                    endTime="endTime"
                    valueformat="timestamp"
                    size="small"
                ></datePicker>
            </el-form-item>
            <el-form-item prop="businessUnitId" :label="$t('m.label.BU')" label-width="40px">
                <BU
                    :form="ruleForm"
                    formId="businessUnitId"
                    :multiple="true"
                    addSize="mini"
                    @selectAll="getCategory"
                    @selectDel="getCategory"
                    size="small"
                ></BU>
            </el-form-item>
            <el-form-item prop="productCategoryId" :label="$t('m.label.productCategory')" label-width="75px">
                <category
                    ref="category"
                    :form="ruleForm"
                    formId="productCategoryId"
                    formBU="businessUnitId"
                    :multiple="true"
                    @selectAll="getProduct"
                    @selectDel="getProduct"
                    addSize="mini"
                    size="small"
                ></category>
            </el-form-item>
            <el-form-item prop="productId" :label="$t('m.label.productModelNumber')" label-width="75px">
                <product
                    ref="product"
                    formId="productId"
                    formBU="businessUnitId"
                    formCategory="productCategoryId"
                    :form="ruleForm"
                    :multiple="true"
                    @selectAll="getReverseBuandCategory"
                    @selectDel="getReverseBuandCategory"
                    addSize="mini"
                    size="small"
                ></product>
            </el-form-item>
            <el-form-item prop="countryId" :label="$t('m.label.country')">
                <country :form="ruleForm" formId="countryId" :multiple="true" addSize="mini" size="small"></country>
            </el-form-item>
            <el-form-item label-width="5px">
                <el-button type="primary" @click="submitForm" icon="el-icon-search" size="small">{{$t('m.button.search')}}</el-button>
            </el-form-item>
            <el-form-item label-width="5px">
                <el-button @click="resetForm('ruleForm')" icon="el-icon-circle-close" size="small">{{$t('m.button.reset')}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
const ERR_OK = 200;
import { getWeekDate } from "assets/js/date";
import { BU, category, product, country ,datePicker } from "components/searchfor";
export default {
    data() {
        return {
            ruleForm: {
                businessUnitId: [],
                productCategoryId: [],
                countryId: [],
                productId: [],
                startTime: getWeekDate()[0],
                endTime: getWeekDate()[1],
                date: getWeekDate()
            }
        };
    },
    created() {
      //获取地址的productId参数进行查询
      // if(this.$route.query.productId){
      //   this.ruleForm.productId.push(Number(this.$route.query.productId))
      //   if(this.$route.query.productCategoryId)
      //     this.ruleForm.productCategoryId.push(Number(this.$route.query.productCategoryId))
      //   if(this.$route.query.businessUnitId)
      //     this.ruleForm.businessUnitId.push(Number(this.$route.query.businessUnitId))
      //
      // }

      this.submitForm()
    },
    methods: {
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
        },
        getProduct() {
            this.$refs.category.getCategory(true);
            this.$refs.product.getProduct();
        },
        getReverseBuandCategory() {
            this.$refs.product.getProduct(true);
        },
        // 提交查询
        submitForm() {
            this.$emit("submitForm", this.ruleForm);
        },
        // 重置条件
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCategory();
            this.ruleForm.startTime = "";
            this.ruleForm.endTime = "";
        }
    },
    components: {
        BU,
        category,
        product,
        country,
        datePicker
    }
};
</script>
<style lang="stylus" scoped>
.el-form{
    margin-bottom 5px;
    .el-form-item {
        display: inline-block;
        margin-bottom 0;
        .el-select{
            max-width 175px
        }
    }
}
.el-range-editor.el-input__inner{
    max-width 220px
}
</style>
